<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page import="com.solution.common.config.PublicConfig"%>
<%@page import="com.solution.admin.order.constants.OrderConstants"%>
<%@page import="com.solution.admin.home.constants.IndexConstants"%>
<%
	String basePath = PublicConfig.ROOT_PATH;
	String imgRootURL = PublicConfig.IMG_ROOT_URL;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>上传合同</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta content="zh-cn" http-equiv="content-language" />
<meta content="" name="copyright" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>/statics/css/style.css?t=1" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>/statics/css/public.css" />
<!-- 大图查看插件 -->
<link rel="stylesheet" type="text/css" href="<%=basePath%>/statics/plugins/fancybox/css/fancybox.css" />
<!--[if lte IE 6]> 
<script type="text/javascript" src="js/PNG.js"></script> 
<script> 
PNG.fix('*'); 
</script> 
<![endif]-->
<script type="text/javascript">
	//系统域名 
	var rootPath = '<%=basePath%>';
	// 系统上传文件展示域名
	var imgRootURL = '<%=imgRootURL%>';
</script>
<style>
	.pic2{position:relative;width:48px;height:48px;margin:auto;display:inline-block;margin-right:10px;margin-bottom:10px;}
	.pic2 img{width:48px;height:48px;border:1px solid #ccc;}

	.pic2 input{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer;}
	.pic2 a.icon_close{position:absolute;display:block;right:-8px;top:-8px;width:18px;height:18px;background:url(<%=basePath%>/statics/images/icon_close2.png) no-repeat;}
	.bank_list1_con dl dt{float:left;margin-right:60px;margin-bottom:10px;width:258px;min-height:130px;border:1px solid #ccc;}
    .upload_tips{display:inline-block;width:100%;margin-bottom:0px;margin-top:20px;}
	.upload_tips p{margin-left:22px;font-size:14px;color:#999}
	.upload_tips p u{display:inline-block;width:16px;height:16px;background:url(<%=basePath%>/statics/images/icon_notice.png) no-repeat;vertical-align:middle;margin-right:5px;}
	.upload_tips p span{display:inline-block;vertical-align:middle}
</style>
</head>
<body style="background:#fff">
	<c:set var="rootPath" value="<%=basePath %>"></c:set>
	<c:set var="imgRootURL" value="<%=imgRootURL %>"></c:set>
	<div class="wrap">

		<!---头部公共部分开始-->
		<div class="header">
			<jsp:include page="../header_top.jsp" />
		</div>
		<div class="member_header">
			<div class="member_header_con">
				<h1>
					<a href="${rootPath}/pc/index"><img src="${rootPath}/statics/images/logo5.png" /></a>
				</h1>
				<div class="member_nav">
					<ul>
						<li><a class="a1" href="${rootPath}/pc/index">首页</a></li>
						<li onmouseover="this.className='hover'"
							onMouseOut="this.className=''"><a href="#" class="a1">账户管理<i></i></a>
							<dl>
								<dd>
									<p>
										<span>账户管理</span><i></i>
									</p>
								</dd>
								<dt>
									<a href="<%=basePath%>/pc/my"><p>我的信息</p></a>
								</dt>
								<dt>
									<a href="<%=basePath%>/pc/my/mypwd"><p>修改密码</p></a>
								</dt>
								<dt>
									<a href="<%=basePath%>/pc/my/address"><p>收货地址</p></a>
								</dt>
							</dl>
						</li>
					</ul>
				</div>
				<div class="member_header_right">
					<div class="search_part11">
						<form action="<%=basePath%>/pc/product/search">
							<input type="text" name="searchKey"  class="inputstyle11" /> <input type="submit"
								class="inputbtn11" value="搜索" />
						</form>
					</div>
					<div class="cart_part1">
						<p>
							<a href="${rootPath}/pc/shoppingcart/list"><i></i><span>我的购物车</span><em id="shopCount">0</em></a>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>
	<!---头部公共部分结束-->
	
	<div class="site_wrap115">
		<div class="site_wrap115_con">
			<div class="order_info11">
				<div class="order_info11_1">
					<input type="hidden" id="order_code"  value="${orderCode}"/>
					<h1>订单提交成功，请尽快上传合同！订单号：${orderCode}</h1>
					<h3>
						应付金额 <b>${realPayMoney }</b> 元
					</h3>
				</div>
				<div class="order_info11_2">
					<p><a id="print_contract" href="javascript:void(0)">下载合同</a></p>
				</div>
			</div>
			<div class="site_wrap115_con">
				<input type="hidden"  id="approve_result"  value="${order.approveResult}"/>
				
				<c:if test="${order.approveResult == '02'}">
					<strong>
						<span>审核不通过原因：</span><span>${order.approveReason }</span>
					</strong>
					<c:forEach items="${contractList}" var="contract">
						<input type="hidden"  id="contract_id"  value="${contract.id}"/>
						<c:forEach items="${contract.imagePathList}" var="imagePath">
							<strong>
								<input type="hidden" value="${imagePath}" />
								<img src = "${imgRootURL}${imagePath }?x-oss-process=image/resize,h_100,w_100/format,png" />
								<a name="remove_img_a" href="javascript:void(0);" class="icon_close3"></a>
							</strong>
						</c:forEach>
					</c:forEach>
				</c:if>
			</div>
			<div class="order_info12">
				<div class="hd">
					<h3>
						<span>上传合同</span><i></i>
					</h3>
				</div>
				<div class="bd">
					<div class="zf_way zf_way3">
						<ul>
							<li>
								<div class="input_part1">
									<input type="button" class="inputbtn1" value="点击上传" onclick="upload_contract(this);"/>
									<input id="upload_contract" style="position:relative;" tag="public" type="file" accept="image/png,image/jpeg" name="upload" onchange="ajaxFileUpload(this)"/>
								</div>
							</li>
							<li class="uplocad_contract_img_container" id="contract_img_list">
								
							</li>
						</ul>
					</div>
				</div>
				<div class="upload_tips">
					<p><u></u><span>仅限上传图片，上传图片大小为5M以下</span></p>
				</div>
			</div>
			<div class="order_info12" style="padding-bottom: 0">
				<div class="pay_info3">
					<p>&nbsp;</p>
					<strong><a id="btn_upload_contract" href="javascript:void(0);" class="btn2">确认合同</a></strong>
				</div>
			</div>
		</div>
	</div>
	<!---网站底部开始-->
	<jsp:include page="../footer.jsp?showQaFlag=0" />
	<!---网站底部结束-->
	</div>

<script charset="utf-8" language="javascript" type="text/javascript" src="<%=basePath%>/statics/js/jquery.1.11.3.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/statics/plugins/upload/ajaxfileupload.js"></script>
<script type="text/javascript" src="<%=basePath%>/statics/plugins/layer/layer.js"></script>
<!-- 大图查看插件 -->
<script type="text/javascript" src="<%=basePath%>/statics/plugins/fancybox/js/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript">
$(function() {
	/**
	 * 获取购物车数量
	 */
	$.ajax({
		type: 'POST',
		url: rootPath + "/pc/shoppingcart/getShoppingcarCount",
		async: true,
		dataType: 'json',
		success: function(json) {
			if(json.code == '1') {
				$("#shopCount").html(json.data);
			}
		}
	});
});
	
	$(function(){
		$("#btn_upload_contract").click(function(){
			var order_code = $("#order_code").val();
			var imgPath = []; 
			$("#contract_img_list").find("input").each(function(){
				imgPath.push($(this).val());
			});
			if(!imgPath || imgPath.length == 0){
				layer.msg("请上传合同凭证",{time:2000});
				return false;
			}
			var approveResult = $("#approve_result").val();
			var contract_id = $("#contract_id").val();
			var url = rootPath + "/pc/order/uploadOrderContract";
			$.ajax({
				type: 'POST',
				url: url,
				async: true,
				data: {
					orderCode: order_code,
					contractImagePath : imgPath.join(","),
					approveResult: approveResult,
					contractId :contract_id
				},
				dataType: 'json',
				success: function(json) {
					if(json.resultCode == '1'){
						layer.msg('合同上传成功',{time:1000});
						setTimeout(function(){
							window.location.href= rootPath + "/pc/order/list";
						},1000);
					}
				},
				error: function(){
					layer.msg('合同上传失败',{time:2000});
				}
			})
		});
		
		$("#print_contract").click(function(){
			var url = rootPath + "/pc/order/toPrintOrderContract?orderCode="+$("#order_code").val();
		    layer.open({
		    	  type: 2,
		    	  title: '订单合同',
		    	  shadeClose: true,
		    	  shade: 0.8,
		    	  area: ['780px', '90%'],
		    	  content: url
		    }); 
		});
	});
	
	//通过ajax提交图片
	function ajaxFileUpload(obj) {
		var id = $(obj).attr("id");
		var tag = $(obj).attr("tag");
		var orderCode = $("#order_code").val();
		var check = imageCheck(obj);
		if (!check) {
			return;
		}
		var index = layer.load(2, {content:'合同正在上传,请耐心等待...',time: 10*1000,shade: 0.15,success: function(layero){
			layero.find('.layui-layer-content')
				.css('padding-top', '10px')
				.css('width','220px')
				.css('padding-left', '40px')
				.css('font-size', '15px');
		}});
		$.ajaxFileUpload({
			url: rootPath + '/uploadFile/uploadOneFile',
			secureuri: false,
			fileElementId: id, // input标签id属性值
			dataType: 'json',
			success: function(data, status) {
				if(data.code == 1) {
					$("#contract_img_list").append($("<strong>"+
						"<input type='hidden' value='"+data.filePath+"' />" +
						"	<a rel='contractImg' href='"+imgRootURL+data.filePath+"'>"+
						"		<img src = '"+imgRootURL+data.filePath+"?x-oss-process=image/resize,h_100,w_100/format,png' />"+
						"	</a>"+
						"<a name='remove_img_a' href='javascript:void(0);' class='icon_close3'></a>"+
						"</strong>"));
					
					$("#contract_img_list").find("a[name='remove_img_a']").each(function(){
						$(this).click(function(){
							$(this).closest("strong").remove();
							countImage("contract_img_list");
						});
					});
					countImage("contract_img_list");
					initFancyBoxImg("contractImg");
					layer.close(index);
				} else {
					layer.msg('上传失败',{time:1000});
					layer.close(index);
				}
			}
		});
	}
	
	//检查图片格式及大小
	function imageCheck(obj){
		var id = $(obj).attr("id");
		var filePath = $("#"+id).val();
		//检查后缀
		var ext = filePath.substring(filePath.lastIndexOf("."), filePath.length).toUpperCase();
		if (ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {
			layer.msg('只能上传图片',{time:2000});
			return false;
		}
		var file_size = 0;
		if (false || !!document.documentMode) {
			var img = new Image();
			img.src = filepath;
			while (true) {
				if (img.fileSize > 0) {
					if (img.fileSize > 5 * 1024 * 1024) {
						layer.msg('图片不能大于5MB',{time:2000});
						return false;
					}
					break;
				}
			}
		} else {
			file_size = obj.files[0].size;
			var size = file_size / 1024;
			if (size > 5120) {
				layer.msg('图片不能大于5MB',{time:2000});
				return false;
			}
		}
		return true;
	}
	
	function upload_contract(event) {
		$("#upload_contract").click();
	}
	
	//加载图片浏览器
	function initFancyBoxImg(relName){
		$("a[rel='"+relName+"']").fancybox({
			'titlePosition' : 'over',
			'cyclic'        : false,
			'titleFormat'	: function(title) {
				return '';
			}
		});
	}
	
	//图片计数
	function countImage(id) {
		var imgageNum = $("#"+id).find("strong").length;
		if (imgageNum > 0) {
			$("#"+id).closest("ul").find("input[type='button']").val("继续上传");
		} else {
			$("#"+id).closest("ul").find("input[type='button']").val("点击上传");
		}
	}
</script>

</body>
</html>